<template>
    <div class="moresearchlist">
       <van-cell style="height:50px">
			<template #title>
				<van-image round width="2rem" height="2rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
				<div style="font-size: 12px;margin-left:5px" @click="$router.push({name:'shopindex'})">{{shopname}}</div>
			</template>
			<template #right-icon>
				<div class="van-cell_righticon">
					<router-link :to="{name:'search'}"><van-icon name="search" class="search-icon" style="font-size:18px;margin-right:15px;" /></router-link><div style="font-size: 12px;">关注</div>&nbsp;|&nbsp;<div
						style="font-size: 12px;" @click="$router.push({name:'my'})">个人中心</div>
				</div>
			</template>
		</van-cell>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
                <van-card
                    num="2"
                    price="2.00"
                    :desc="item2.description"
                    :title="item2.title"
                    thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                    origin-price="10.00"
                    v-for="(item2, index2) in list"
                    :key="index2"
                    @click="clickLive(item2.id)"
                >
                    <template #thumb>
                        <van-image width="110" height="90" :src="item2.cover" />
                    </template>
                    <template #price>
                        <span style="color: red">{{ item2.price == 0 ? '免费' : '￥' + item2.price }}</span>
                    </template>
                    <template #origin-price>
                        <span>{{ item2.marking_price == 0 ? '' : '￥' + item2.marking_price }}</span>
                    </template>
                    <template #tags>
                        <van-tag plain type="danger" style="margin-right: 3px" v-for="(item3, index3) in item2.tag" :key="index3">{{
                            item3
                        }}</van-tag>
                    </template>
                    <!-- <template #footer>
					<van-button size="mini">按钮</van-button>
					<van-button size="mini">按钮</van-button>
				</template> -->
                    <template #num>
                        <span>{{ item2.view }}次观看</span>
                    </template>
                </van-card>
            </van-list>
        </van-pull-refresh>
        <xjmenubar :menubar="tabbar" :prevent="false" :cactive="cactive"></xjmenubar>
    </div>
</template>

<script>
import xjsearch from '@/components/shop/xjsearch.vue';
import xjmenubar from '@/components/shop/xjmenubar.vue';
export default {
    name: 'seachlist',
    components: {
        xjsearch,
        xjmenubar
    },
    data() {
        return {
            shopname: localStorage.getItem('shopname')?localStorage.getItem('shopname'):'', //店铺名
            searchdata: '',
            tabbar: '',
            cactive: 0, //菜单索引
            list: [], //视频数据列表
            livelist: [],
            loading: true,
            finished: false,
            refreshing: false,
            page: 1, //第1页数据
            total: '', //获得总cardlist总数
            id:''
        };
    },
    methods: {
        async getPhonePageData() {
            let res = await this.$frontaxios.post(this.$front.getPhonePageData);
            //console.log(res);
            if (!res.data) {
                this.$notify({ type: 'warning', message: '请设置店铺首页，再过来查看' });
                return;
            }
            if (res.code == 1) {
                this.tabbar = res.data.tabbar;
            } else {
                this.$notify({ type: 'warning', message: res.msg });
            }
        },
        async onLoad() {
            if (this.refreshing) {
                this.list = [];
                this.refreshing = false;
            }
            await this.getLiveList();
            this.list.push(...this.livelist);
            this.page++;
            this.loading = false;
            if (this.list.length >= this.total) {
                this.finished = true;
            }
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.page = 1;
            this.onLoad();
            this.$toast.success('刷新成功');
        },
        async getLiveList() {
            //获得直播列表
            let query = {
                status: 1,
                page: this.page,
                limit: 4,
                id:this.id
            };
            let res = await this.$frontaxios.post(this.$front.getLiveList, query);
            //console.log(res);
            if (res.code == 1) {
                this.loading=true;
                this.livelist = res.data.livecoursedata;
                this.total = res.data.total;
                for (let i = 0; i < this.livelist.length; i++) {
                    if (this.livelist[i].tag) {
                        this.livelist[i].tag = this.livelist[i].tag.split(',');
                    }
                }
            } else {
                console.log('获取直播数据列表失败');
            }
        },
        clickLive(id) {
            //console.log(id);
            this.$router.push({
                name: 'livecontent',
                query: {
                    id
                }
            });
        }
    },
    async created() {
        this.id=this.$route.query.id;
        this.getPhonePageData(); //获得菜单栏数据初始化菜单数据
        this.onLoad();
    }
};
</script>

<style lang="scss" scoped>
	.moresearchlist {
		.van-cell__title {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.van-cell_righticon {
			display: flex;
			flex-direction: row;
			align-items: center;
		}


		.van-card__content {
			margin-left: 20px;
		}

		.van-cell {
			align-items: center;
			border: 1px solid #eee;
			height: 40px;
		}
	}

	.child-item {
		margin-top: 10px;
		text-align: center;

		.vancol {
			margin-bottom: 8px;

			.defaulttagcolor {
				color: #87929B;
			}

			.selecttagcolor {
				color: #168DFA;
			}
		}
	}
</style>
